<!-- 树状菜单 -->
<template>
  <div class="tree">
    <div class="_header">
      <span class="_title">分类列表</span>
      <a v-has="'content:consult:class:add'" @click="handleShowTypeModal('add', {})">新增分类</a>
    </div>
    <a-tree show-line :tree-data="treeData" :replaceFields="replaceFields">
      <a-icon slot="switcherIcon" type="down" />
      <template slot="custom" slot-scope="item">
        <span class="node-title" @click="onSelect(item)">{{ item.module }} </span>
        <span v-has="'content:consult:class:edit'" class="icon-wrap" @click="handleShowTypeModal('edit', item)">
          <a-icon type="edit" />
        </span>
        <span v-has="'content:consult:class:remove'" class="icon-wrap" @click="handleDelType(item.id)">
          <a-icon type="delete" />
        </span>
        <span class="icon-wrap" @click="handleOpenShareModal(item)">
          <a-icon type="share-alt" />
        </span>
      </template>
    </a-tree>
    <TypeModal ref="typeModal" @success="actionSuccess" />
    <!-- 分享活动 -->
    <ShareModal ref="ShareModal" />
  </div>
</template>

<script>
import TypeModal from '../TypeModal'
import ShareModal from '../ShareModal/index.vue'
import { informationCategoryList, delInformationCategory } from '@/api/content/management'
export default {
  components: {
    TypeModal,
    ShareModal
  },
  data() {
    return {
      treeData: [],
      replaceFields: {
        children: 'children',
        title: 'module',
        key: 'id'
      }
    }
  },
  computed: {},
  watch: {},
  methods: {
    handleOpenShareModal(item) {
      this.$refs.ShareModal.openModel(item)
    },
    getModule() {
      informationCategoryList().then(r => {
        if (typeof r.data !== 'object') return
        this.treeData = (r.data || []).map(item => {
          return {
            ...item,
            scopedSlots: { title: 'custom' }, // 自定义组件需要绑定
            children: item.children
              ? item.children.map(child => {
                  return {
                    ...child,
                    scopedSlots: { title: 'custom' } // 自定义组件需要绑定
                  }
                })
              : undefined
          }
        })
      })
    },
    onSelect(row) {
      console.log('selected', row)
      this.$emit('searchManagement', {
        module: row.parentId === 0 ? row.id : row.parentId,
        moduleSub: row.parentId === 0 ? undefined : row.id
      })
    },
    handleShowTypeModal(type, row) {
      let data = {
        title: type === 'add' ? '新增分类' : '编辑分类',
        type,
        obj: JSON.parse(JSON.stringify(row))
      }
      this.$refs.typeModal.show(data)
    },
    handleDelType(id) {
      var _this = this
      this.$confirm({
        title: '删除?',
        content: '是否确定删除该分类?',
        onOk() {
          delInformationCategory(id).then(res => {
            if (res.code === 0) {
              _this.$message.success(`删除成功`)
              _this.getModule()
            } else {
              _this.$message.error(res.msg)
            }
          })
        },
        onCancel() {}
      })
    },
    actionSuccess() {
      this.getModule()
    }
  },
  created() {
    this.getModule()
  },
  mounted() {}
}
</script>
<style scoped lang="less">
.tree {
  width: 250px;
  flex-shrink: 0;

  ._header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    ._title {
      font-size: 18px;
      font-weight: bold;
    }
  }
}

.icon-wrap {
  // float: right;
  margin-left: 15px;
}
</style>
